import Taro, { Component } from '@tarojs/taro'
import { View , Text , Image} from '@tarojs/components';
import { baseImgSrc } from '../../util/base_url';
import { AtButton , AtInput } from 'taro-ui';
import { getIdAuth , upServerFile } from '../../util/api';
import './idauth.scss';
export default class IdAuth extends Component{
    config = {
        navigationBarTitleText:"认证中心",
    }
    constructor(){
        super(...arguments);
        this.state  = {
            model:1, //模式 1代表需要进行认证   2 是认证成功  3 是认证中 4 是认证失败 5:驾驶证认证失败
            name:"",
            idCard:"",
            idCardPic:"",
            idCardRealPic:"",
            idCardPicFan:"",
            realIdCardPicFan:"",
            facePic:"",
            faceRealPic:"",
            defaultPic:`${baseImgSrc}/updefault.png`,
        }
    }
    componentWillMount(){
        let { model = 1 } = this.$router.params;
        this.setState({model})
    }
    // 选择身份证
    chosePic(){
        Taro.chooseImage({
           count:1,
        }).then( res => {
            let idCardPic = res.tempFilePaths[0];
            upServerFile(idCardPic).then( res => { this.setState({idCardPic,idCardRealPic:res.data,})})
        })
    }
    chosePicFan(){
        Taro.chooseImage({
            count:1,
        }).then( res => {
            let idCardPicFan = res.tempFilePaths[0];
            upServerFile(idCardPicFan).then( res => { this.setState({idCardPicFan,realIdCardPicFan:res.data,})})
        })
    }
    //拍摄脸部照片
    choseFace(){
        Taro.chooseImage({
            count:1,
            sourceType:['camera'],
         }).then( res => {
            let facePic = res.tempFilePaths[0];
            upServerFile(facePic).then( res => { this.setState({facePic,faceRealPic:res.data,})})
         })
    }
    onNameChange(value){
        this.setState({name:value});
        return value;
    }
    onIdCardChange(value){
        this.setState({idCard:value});
        return value;
    }
    submitCheck(){
        let { name , idCard , idCardPic ,idCardRealPic ,  facePic , faceRealPic , idCardPicFan , realIdCardPicFan } = this.state;
        if(!name){
            Taro.atMessage({
                message:"请输入姓名",
                type:'error'
            })
            return false
        }
        if(!idCard){
            Taro.atMessage({
                message:"请输入身份证号",
                type:'error'
            })
            return false
        }
        if(!idCardPic){
            Taro.atMessage({
                message:"请上传身份证正面照片",
                type:'error'
            })
            return false
        }
        if(!idCardPicFan){
            Taro.atMessage({
                message:"请上传身份证背面照片",
                type:'error'
            })
            return false
        }
        if(!facePic){
            Taro.atMessage({
                message:"请上传人脸信息",
                type:'error'
            })
            return false
        }
        Taro.showLoading({title:"正在提交公安部认证"})
        getIdAuth({
            name,
            address:idCard,
            img_one:idCardRealPic,
            img_two:realIdCardPicFan,
            img_three:faceRealPic,
        }).then( res => {
            Taro.hideLoading();
            if(res.code == 0){
                Taro.showModal({
                    title:"提示",
                    content:res.msg
                }).then( res => {
                    Taro.navigateBack();
                })
            }else{
                Taro.showModal({
                    title:"提示",
                    content:res.msg
                })
            }
        })
    }
    redirectAuth(){
        this.setState({
            model:1,
        })
    }
    redirectDriverAuth(){
        Taro.navigateTo({
            url:"/pages/idauthUser/idauthUser"
        })
    }
    render(){
        let { model , name , idCard , idCardPic , facePic ,idCardPicFan } = this.state; 
        return(
            <View className='auth'>
                {
                    model == 1 ? (
                    <View className='up-box'>
                        <AtInput
                            name='value1'
                            title='姓名'
                            type='text'
                            placeholder='请输入姓名'
                            value={name}
                            clear
                            onChange={this.onNameChange.bind(this)}
                        />
                        <AtInput
                            name='value2'
                            title='身份证号'
                            type='idcard'
                            placeholder='请输入身份证号码'
                            value={idCard}
                            clear
                            onChange={this.onIdCardChange.bind(this)}
                        />
                        <View className='title flex align-items flex-start'>请上传身份证人像面</View>
                        <View className='pic-box' onClick={this.chosePic.bind(this)}>
                            {
                                idCardPic == '' ?  <Image className='pic updefault' src={baseImgSrc+"/idcard_zheng.png"} /> : <Image className='pic' src={idCardPic} />
                            }
                        </View>
                        <View className='title flex align-items flex-start'>请上传身份证国徽面</View>
                        <View className='pic-box' onClick={this.chosePicFan.bind(this)}>
                            {
                                idCardPicFan == '' ?  <Image className='pic updefault' src={baseImgSrc+"/idcard_fan.png"} /> : <Image className='pic' src={idCardPicFan} />
                            }
                        </View>
                        <View className='title flex align-items flex-start'>请上传本人脸照片</View>
                        <View className='pic-box' onClick={this.choseFace.bind(this)}>
                            {
                                facePic == '' ?  <Image className='pic updefault' src={baseImgSrc+"/idcard_renlian.png"} /> : <Image className='pic' src={facePic} />
                            }
                        </View>
                        <AtButton className='next-tip' type='primary' size='normal' onClick={this.submitCheck.bind(this)}>开始认证</AtButton>
                    </View>
                    ) : model == 2 ? (
                        <View>
                            <Image className='status-pic' src={`${baseImgSrc}/shenhe_ok.png`} />
                            <View className='status-txt'>您的认证成功</View>
                        </View>
                    ) : model == 3 ? (
                        <View>
                            <Image className='status-pic' src={`${baseImgSrc}/shenhe_jujue.png`} />
                            <View className='status-txt'>请耐心等待审核</View>
                        </View>
                    ) : model == 4 ? (
                        <View>
                            <Image className='status-pic' src={`${baseImgSrc}/shenhe_jujue.png`} />
                            <View className='status-txt'>您的实名认证失败，请重新提交</View>
                            <AtButton className='next-tip' type='primary' size='normal' onClick={this.redirectAuth.bind(this)}>重新认证</AtButton>
                        </View>
                    ) : model == 5 ? (
                        <View>
                            <Image className='status-pic' src={`${baseImgSrc}/shenhe_jujue.png`} />
                            <View className='status-txt'>您的驾驶证认证失败，请重新提交</View>
                            <AtButton className='next-tip' type='primary' size='normal' onClick={this.redirectDriverAuth.bind(this)}>重新认证</AtButton>
                        </View>
                    ) : ""
                }
            </View>
        )
    }
}